<template>
	<view class="mine">
		<view class="navigation" style="height: 44px;background-color: #fff;"></view>
		<div class="userinfo_box">
			<up-image src="../../static/imgs/workbenches/header.png" shape="circle" width="170rpx"
				height="170rpx"></up-image>
			<div class="info">
				<div class="name_box">
					<div class="name">{{ userinfo.name }}</div>
					<div class="level">
						<up-icon name="plus-circle" size="38rpx" color="" style="margin-right: 20rpx;"
							v-if="userinfo.roleName == '超级管理员'"></up-icon>

						<image src="/static/images/if-business-man-alt-1 1@2x.png" alt=""
							style="width:38rpx;height:38rpx" v-if="userinfo.roleName == '负责人'" />
						<image src="/static/images/if-graduate 1@2x.png " alt="" style="width:38rpx;height:38rpx"
							v-if="userinfo.roleName == '生涯规划师'" />
						<image src="/static/images/ze-manager 1@2x.png " alt="" style="width:38rpx;height:38rpx"
							v-if="userinfo.roleName == '门店店长'" />
						<image src="/static/imgs/workbenches/goldCoin.png" alt="" style="width:38rpx;height:38rpx"
							v-if="userinfo.roleName == '共享合伙人'" />
						<span>{{ userinfo.roleName }}</span>
					</div>
				</div>
				<div class="phone">{{ userinfo.phone ? userinfo.phone : '13864547788' }}</div>
				<div class="address">{{ userinfo.businessName ? userinfo.businessName : '' }}</div>

			</div>
		</div>
		<div class="setting_box">
			<up-icon name="setting-fill" size="24"></up-icon>
			<div class="setting_name">设置</div>
		</div>

		<div class="content_box">
			<up-cell-group :border="false">
				<up-cell title="账号安全与管理" isLink class="left-align-cell" @tap="toSafe"></up-cell>
				<!-- <up-cell title="权限管理" isLink class="left-align-cell" @tap="toPermission"></up-cell> -->
				<!-- <up-cell title="清理缓存" isLink class="left-align-cell"></up-cell> -->
				<up-cell title="服务协议" isLink class="left-align-cell"
					@tap="uni.navigateTo({ url: '/pages/Service/Service' })"></up-cell>
				<up-cell title="隐私政策" isLink class="left-align-cell"
					@tap="uni.navigateTo({ url: '/pages/Privacy/Privacy' })"></up-cell>
				<up-cell title="退出登录" isLink class="left-align-cell" :border="false" @tap="show = true"></up-cell>
			</up-cell-group>

		</div>
		<up-modal :show="show" :showCancelButton="true" content='确定要退出登录?'>
			<template #confirmButton>
				<div class="modal_btm">
					<div style="margin-right:30rpx" @tap="show = false"> 取消</div>
					<div style="color:#FF903C" @tap="exitLogin"> 确定</div>
				</div>
			</template>
		</up-modal>
	</view>
</template>

<script setup>
import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'; 

// 页面显示时执行，确保每次切换都是新页面
const toSafe = () => {
	uni.navigateTo({
		url: '/pages/AccountSafe/AccountSafe',
	})
}

const show = ref(false)

const toPermission = () => {
	uni.navigateTo({
		url: "/pages/Permission/Permission"
	})
}
const exitLogin = () => {
	show.value = false
	uni.removeStorageSync('userinfo');
	uni.removeStorageSync('token');
	uni.removeStorageSync('businessId');
	uni.removeStorageSync('roleAuthority');
	uni.navigateTo({
		url: '/pages/login/login'
	})
}
const userinfo = ref({})
const getUserInfo = () => {
	userinfo.value = JSON.parse(uni.getStorageSync('userinfo'))
	console.log(userinfo.value);
}
onShow(()=>{
	 getUserInfo();
})

</script>

<style lang="scss">
.mine {
	width: 100%;
	height: calc(100vh - 100rpx);
	background-color: rgba(247, 248, 250, 1);
	.userinfo_box {
		padding-left: 38rpx;
		margin-top: 38rpx;
		display: flex;
		align-content: center;
	}

	.info {
		margin-left: 20rpx;
		flex: 1;

	}

	.name_box {
		display: flex;
		align-items: center;

		.name {
			width: 80rpx;
			height: 42rpx;
			line-height: 42rpx;
			color: rgb(16, 16, 16);
			font-size: 40rpx;
			text-align: left;
			font-family: PingFangSC-bold;
			white-space: nowrap;
		}

		.level {
			width: 252rpx;
			border-radius: 52rpx;
			background-color: rgba(252, 202, 0, 0.16);
			color: rgba(252, 202, 0, 1);
			font-size: 28rpx;
			height: 62rpx;
			text-align: center;
			font-family: -regular;
			margin-left: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
        

		}
	}

	.phone {
		width: 158rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: rgba(108, 108, 108, 1);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.address {
		width: 196rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: rgba(108, 108, 108, 1);
		font-size: 28rpx;
		text-align: left;
		font-family: PingFangSC-regular;
		margin-top: 10rpx;
		white-space: nowrap;;
	}

	.setting_box {
		display: flex;
		align-items: center;
		margin-top: 80rpx;
		padding-left: 68rpx;

		.setting_name {
			width: 64rpx;
			height: 46rpx;
			margin-left: 8rpx;
			line-height: 46rpx;
			color: rgba(79, 79, 79, 1);
			font-size: 32rpx;
			text-align: left;
			font-family: PingFangSC-bold;
		}
	}

	.content_box {
		width: 638rpx;
		border-radius: 12rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		/* 移除content_box的text-align:center，它可能会影响子元素 */
		font-family: -regular;
		margin: auto;
		margin-top: 18rpx;
	}

	/* 增强版左对齐样式 */
	.up-cell-group .up-cell.left-align-cell .up-cell__title {
		text-align: left !important;
		justify-content: flex-start !important;
	}

	/* 确保单元格内容区域也左对齐 */
	.up-cell-group .up-cell.left-align-cell .up-cell__body {
		text-align: left;
	}
}

.modal_btm {
	text-align: right;
	display: flex;
	width: 100%;
	justify-content: right;
}
</style>
